<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录页面</title>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 180px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 200px;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
</style>
</head>
<body>

<div id="app">

    <el-container>
        <el-header style="font-size: 35px">
            <el-row :gutter="20">
                <el-col :span="18" :offset="2">
                    后台登录页面(联系电话:18727563655)
                </el-col>
                <el-col :span="3" :offset="1">
                    <el-button type="primary" @click="onUserMain">用户系统</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="height: 600px;">
            <el-row :gutter="20">
                <el-col :span="8" :offset="8">
                    <div class="grid-content bg-purple">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-row :gutter="20">
                                <el-col :span="18" :offset="3"  style="margin-top: 80px">
                                    <el-form-item label="用户名：" label-width="100px">
                                        <el-input v-model="formInline.username"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="18" :offset="3">
                                    <el-form-item label="密  码：" label-width="100px">
                                        <el-input v-model="formInline.password" show-password></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8" :offset="8" style="margin-bottom: 80px">
                                    <el-form-item>
                                        <el-button type="primary" style="width: 200px" @click="onSubmit">登录</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            (@湖北工程学院)-(@软件工程)-@(021321752308)-(@李澳)-(@2022-06-14)
        </el-footer>
    </el-container>


</div>

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                formInline: {
                    id:'',
                    username: '',
                    password: ''
                },
                flag:''
            }
        },
        methods: {
            onSubmit() {
                axios.get("http://localhost/users/"+this.formInline.username+"/"+this.formInline.password).then((res)=>{
                    this.flag = res.data.data;
                    if (this.flag){
                        window.location.href="server_main.html";
                    }else {
                        this.$message('登录失败！');
                    }
                });
            },
            onUserMain() {
                window.location.href="user_main.html";
            }
        }

    })
</script>
</body>
</html>